<template>
    <UIDesignerBuilder :ui-schema="uiSchema">
        <template #extraButtons>
            <el-button :icon="Document" text size="default" @click="onSave"> 保存 </el-button>
        </template>
    </UIDesignerBuilder>
</template>

<script setup lang="ts">
import { DEFAULT_SCHEMA, UIDesignerBuilder } from '@great/designer';
import { Document } from '@element-plus/icons-vue';
import { tryJsonParse } from '@great/utils';
import { cloneDeep } from 'lodash-es';

const uiSchema = reactive(tryJsonParse(localStorage.getItem('_test_page_schema')!, cloneDeep(DEFAULT_SCHEMA)));

watch(uiSchema, a => {
    console.log(a);
});

async function onSave() {
    ElMessage.success('保存成功');
    localStorage.setItem('_test_page_schema', JSON.stringify(uiSchema));
}
</script>

<style scoped></style>
